<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0"/>  
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link rel="icon" href="./img/20180730115044.ico" type="image/x-icon" />
		<meta name="renderer" content="webkit">  
		<title>密室逃脱排行榜</title>
		<link rel="stylesheet" type="text/css" href="css/minireset.css"/>
		<link rel="stylesheet" type="text/css" href="js/swiper/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css?22"/>
	</head>
	<body>
		<div class="body">
			<section class="all_count">
				<!--<div class="refresh" onclick="location.reload();">
					<img src="img/20180730115711.png" alt="" />
				</div>-->
				<header class="title">
					<span class="title_show_name">小明明</span>
					<span>当前排名</span>
					<span class="number">56</span>
					<span class="refresh" onclick="location.reload();"><img src="img/20180730115711.png" alt="" /></span>
				</header>
				<header class="img_title">
					<img src="img/854594105528343250.png"/>
				</header>
				<article class="list">
					<div class="li">
						<!--<span>1</span><img src="img/865133732875463284.png"/><span>名称</span><span>第5关</span><span>用时1.5h</span>-->
					</div>
					<div class="li">
						<!--<span>1</span><img src="img/865133732875463284.png"/><span>名称</span><span>第5关</span><span>用时1.5h</span>-->
					</div>
					<div class="li">
						<!--<span>1</span><img src="img/865133732875463284.png"/><span>名称</span><span>第5关</span><span>用时1.5h</span>-->
					</div>
					<div class="li">
						<!--<span>1</span><img src="img/865133732875463284.png"/><span>名称</span><span>第5关</span><span>用时1.5h</span>-->
					</div>
				</article>
				<header class="img_title">
					<img src="img/194726102735454383.png"/>
				</header>
				
			</section>
		</div>
		
		
		<article class="swiper-container" style="width: 90%;margin: 0 auto 0.6rem;">
				<!--<img src="./img/new_rewards.png"/>-->
				<div class="swiper-wrapper">
				    <div class="swiper-slide">
				    	<div>
				    		<img style="width: 100%;" src="img/show1.png"/>
				    	</div>
				    </div>
				    <div class="swiper-slide">
				    	<div>
				    		<img style="width: 100%;" src="img/show2.png"/>
				    	</div>
				    </div>
				    <div class="swiper-slide">
				    	<div>
				    		<img style="width: 100%;" src="img/show3.png"/>
				    	</div>
				    </div>
				</div>
		</article>
		<div id="nav" class="ball">
			<img onclick="goWeixin()" src="./img/logo.png" alt="" />
		</div>
		
		<script src="js/fastclick.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/flex.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/request.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Inertia.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//滑动的小球
			new Inertia(document.getElementById('nav'));
			
			function getConfig(){
				var url =  window.location.href;
				var data = {
						url:url,
					}
					request.requestAjax("post","base/get_sign",data,function(res){
						console.log(JSON.stringify(res))
						if(res.state == true){
							wx.config({
							    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							    appId: res.data.app_id, // 必填，公众号的唯一标识
							    timestamp: res.data.timestamp, // 必填，生成签名的时间戳
							    nonceStr: res.data.nonce_str, // 必填，生成签名的随机串
							    signature: res.data.sign,// 必填，签名
							    jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表
							});
						}
						if(res.code){
							alert(res.error);
						}
					},function(res){
						console.log(JSON.stringify(res));
						alert("网络错误，请刷新重试！")
					})
			}
			getConfig();
			var  open_id = request.getQueryStringArgs().open_id;
		    var data = {
						open_id:open_id,
					}
					request.requestAjax("post","game/get_rank",data,function(res){
						if(res.state == true){
							document.querySelector(".title_show_name").innerText=res.data.mine_info.open_id ? res.data.mine_info.nick_name : '无名氏';
							document.querySelector(".number").innerText =res.data.mine_info.open_id ? res.data.mine : "未参赛";
							var allListStr = "";
							var countContent = document.querySelector(".list");
							var count = "";
							res.data.ranks.forEach(function(str,idx,arr){
								if(!!str.headimg_url){
									 count = "<div class='li'>"+"<span>"+str.rank + "</span><img src='"+ str.headimg_url  + "'/><span>"+str.nick_name+ '</span><span>第'+str.pass_count + '关</span><span>用时'+str.game_time +"h</span></div>"
								}else{
								 	count = "<div class='li'>"+"<span>"+str.rank + "</span><img src='./img/emity.jpg'/><span>"+str.nick_name+ '</span><span>第'+str.pass_count + '关</span><span>用时'+str.game_time +"h</span></div>"
								}
								allListStr+=count;
							})
							countContent.innerHTML = allListStr;
						}
						if(res.code){
							alert(res.error);
						}
					},function(res){
						console.log(JSON.stringify(res));
						alert("网络错误，请刷新重试！")
					})
			
			function goWeixin(){
				window.location.href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUyNzEwOTk3Mw==&scene=124#wechat_redirect";
			}
		
		var link = window.location.href;
			 wx.ready(function () {
			 	wx.onMenuShareTimeline({
			    title: '密室逃脱排行榜', // 分享标题
			    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			    imgUrl: "https://ylsmserver-1252048467.cos.ap-shanghai.myqcloud.com/share.png", // 分享图标
			    success: function () {
			    // 用户点击了分享后执行的回调函数
			}})
			
			wx.onMenuShareAppMessage({
				title: '密室逃脱', // 分享标题
				desc: '敢玩你就来', // 分享描述
				link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: 'https://ylsmserver-1252048467.cos.ap-shanghai.myqcloud.com/share.png', // 分享图标
				type: '', // 分享类型,music、video或link，不填默认为link
				dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
				success: function () {
				// 用户点击了分享后执行的回调函数
				}
			});
		 })
			 
			 //轮播在渲染完成之后运行
			var swiper = new Swiper('.swiper-container', {
					      direction: 'vertical',
					      centeredSlides: true,
					      allowTouchMove:false,
					      loop: true,
					      height:100,
					      slidesPerView : 'auto',
					      loopedSlides:3,
					      initialSlide:0,
					      autoplay: {
					        delay: 2500,
					        disableOnInteraction: false,
					      },
			});
		</script>
		
	</body>
</html>
